<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js和jq入口函数的区别</title>

    <script src="./js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        /*  js和jq入口函数的区别
                                                                                        1. js入口函数是在等所有DOM元素和图片加载完成以后， 再执行函数，
                                                                                        而jQuery入口函数则是在DOM元素加载完成， 而图片没有加载完成时就执行了函数
                                                                                        2. js入口函数只会执行一次， 而JQuery入口函数会执行多次 */

        window.onload = function() {
            /* //1.原生js获取DOM元素
            var img = document.getElementsByTagName('img')[0]
                //2.获取图片的宽度
            var width = window.getComputedStyle(img).width
            console.log(width) //190px */

            alert('js1')
        }

        window.onload = function() { //只会执行此函数 ，上面的不会执行
            alert('js2')
        }

        $(document).ready(function() {
            var img = $('img').eq(0)
            var width = img.width()
            console.log(width) //0
        })
    </script>
</head>

<body>
    <img src="https://gw.alicdn.com/tfs/TB1vq2AbA9l0K4jSZFKXXXFjpXa-190-121.gif" alt="" />
</body>

</html>